<template>
  <div class="body">
    <div class="body_title">项目安全管理</div>
    <div class="body_main">
      <div class="search_header">
        <el-button
          @click="
            ;(dialogVisible = true),
              (headerTitle = '上传检测报告'),
              (reportType = 1)
          "
          ><div style="display: inline-block">
            <Icon
              name="jiance"
              color="#FFFFFF"
              font-size="14"
            />
          </div>
          上传检测报告</el-button
        >
        <el-button
          style="margin-left: 10px"
          @click="
            ;(dialogVisible = true),
              (headerTitle = '上传复查报告'),
              (reportType = 2)
          "
          ><div style="display: inline-block">
            <Icon
              name="fucha"
              color="#FFFFFF"
              font-size="14"
            />
          </div>
          上传复查报告</el-button
        >
        <div
          style="float: right"
          class="search_header_right"
        >
          <!-- <el-select  placeholder="请选择报告类型" v-model='parameter.type' @change="search" clearable style="margin-right:12px">
              <el-option value="0" label="检测报告"></el-option>
              <el-option value="1" label="复查报告"></el-option>
            </el-select> -->
          <el-input
            placeholder="请输入项目名称"
            clearable
            v-model="parameter.projectName"
            @input="search"
          >
            <span
              slot="suffix"
              style="display: inline-block"
              v-show="!parameter.projectName"
            >
              <Icon
                title="搜索"
                name="sousuo"
                color="#A7ADB5"
                font-size="20"
              />
            </span>
          </el-input>
        </div>
      </div>
      <el-table
        :data="reportList"
        :header-cell-style="{
          background: '#F2F6FB ',
          color: ' #6B767D'
        }"
        height="584px"
        :row-class-name="tableRowClassName"
        :span-method="arraySpanMethod"
        border
      >
        <!-- :span-method="arraySpanMethod" -->
        <el-table-column
          label="序号"
          show-overflow-tooltip
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="项目名称"
          prop="projectName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="类型"
          prop="checkStatus"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span
              v-if="Number(scope.row.checkStatus) === 0"
            >
              检测报告
            </span>
            <span v-else>复查报告</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="Number(scope.row.status) === 0">
              正在填写
            </span>
            <span v-else>已提交</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上传时间"
          prop="createTime"
          show-overflow-tooltip
        >
          <!-- <template slot-scope="scope">
            <span v-if="scope.row.checkStatus==0">
              {{scope.row.createTime}}
            </span>
            <span v-else>{{scope.row.updateTime}}</span>
          </template> -->
        </el-table-column>
        <el-table-column
          label="上传人员"
          prop="userName"
          show-overflow-tooltip
        >
          <!-- <template slot-scope="scope">
            <span v-if="scope.row.reportNum==1">
              {{scope.row.userName}}
            </span>
            <span v-else>{{scope.row.userCheckName}}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="update(scope.row)"
              style="color: #00baff; font-weight: 400"
              v-show="!scope.row.status"
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="view(scope.row)"
              style="color: #00baff; font-weight: 400"
              v-show="scope.row.status"
              >查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right; margin-top: 15px">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="parameter.pageSize"
          @current-change="pageChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      @close="onClose"
      :title="headerTitle"
      width="600px"
      top="25vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        label-width="80px"
        :model="addUser"
        :rules="rules"
        v-if="dialogVisible"
        ref="ruleForm"
      >
        <el-form-item
          label="选择项目"
          prop="projectId"
          v-if="reportType === 1"
        >
          <el-select
            placeholder="请选择项目"
            v-model="addUser.projectId"
            style="width: 100%"
            filterable
          >
            <el-option
              :value="item.pkid"
              :label="item.name"
              v-for="(item, index) in projectList"
              :key="index"
            ></el-option>
            <!-- <el-option value="1" label="项目2"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item
          label="选择项目"
          prop="projectId"
          v-if="reportType === 2"
        >
          <el-select
            placeholder="请选择项目"
            v-model="addUser.projectId"
            style="width: 100%"
            filterable
          >
            <el-option
              :value="item.projectId"
              :label="item.projectName"
              v-for="(item, index) in projectListCheck"
              :key="index"
            ></el-option>
            <!-- <el-option value="1" label="项目2"></el-option> -->
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onClose">取消</el-button>
        <el-button
          type="primary"
          @click="onSumbit('ruleForm')"
          >确定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Icon from '@/components/icon'
import {
  securityQueryProjectName,
  securityQueryPage,
  securityQueryCheckList
} from '@/api/wisdomBuild'

export default {
  name: 'index',
  components: {
    Icon
  },
  data() {
    return {
      reportList: [],
      total: 0,
      headerTitle: '',
      pkid: '',
      parameter: {
        pageSize: 10,
        pageIndex: 1,
        type: '',
        projectName: ''
      },
      stateOptions: [],
      roleOptions: [],
      deptTree: [],
      addUser: {
        projectId: ''
      },
      rules: {
        projectId: [
          {
            required: true,
            message: '请选择项目',
            trigger: 'change'
          }
        ]
      },
      forbidden: false,
      start: true,
      dialogVisible: false,
      projectList: [],
      projectListCheck: [],
      reportType: 1
    }
  },
  watch: {},
  mounted() {
    this.getProjectDataList()
    this.getProblemProj()
    this.getPageList()
  },
  methods: {
    update(e) {
      // var find = this.projectList.find((item) => {
      //   return item.pkid == e.projectId
      // })
      // if (find) {
      const data = {
        pkid: e.projectId,
        name: e.projectName
      }
      this.$router.push({
        path: '/wisdomBuild/checkOrg/form',
        query: {
          data: JSON.stringify(data),
          type: e.checkStatus ? 2 : 1,
          formType: 'edit',
          id: e.pkid
        }
      })
      // }
    },
    view(e) {
      // var find = this.projectList.find((item) => {
      //   return item.pkid == e.projectId
      // })
      // if (find) {
      const data = {
        pkid: e.projectId,
        name: e.projectName
      }
      this.$router.push({
        path: '/wisdomBuild/checkOrg/form',
        query: {
          data: JSON.stringify(data),
          type: e.checkStatus ? 2 : 1,
          formType: 'view',
          id: ''
        }
      })
      // }
    },
    getProjectDataList() {
      securityQueryProjectName().then((res) => {
        if (res.success) {
          this.projectList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getProblemProj() {
      securityQueryCheckList().then((res) => {
        if (res.success) {
          this.projectListCheck = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getPageList() {
      securityQueryPage(this.parameter).then((res) => {
        if (res.success) {
          this.reportList = res.data.list
          this.total = res.data.count
          // let check=res.data.list
          // check=check.map(item=>{
          //   item.report='检测报告'
          //   item.reportNum=1
          //   item.reportStatus=item.status
          //   item.statusLabel=item.status?'已提交':'正在填写'
          //   return item
          // })
          // let reCheck=[]
          // res.data.list.map(item=>{
          //   if(item.checkStatus!=null){
          //     reCheck.push(JSON.parse(JSON.stringify(item)))
          //   }
          // })
          // reCheck=reCheck.map(item=>{
          //   item.report='复查报告'
          //   item.reportNum=2
          //   item.reportStatus=item.checkStatus
          //   item.statusLabel=item.checkStatus?'已提交':'正在填写'
          //   return item
          // })
          // var totalList=check.concat(reCheck)
          // // console.log(check,reCheck,totalList)
          // function sortId(a, b) {
          //   return Number(a.projectId) - Number(b.projectId);
          // }
          // totalList=totalList.sort(sortId);
          // this.reportList=totalList
          this.setrowspans(this.reportList, 'projectId')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    search() {
      this.parameter.pageIndex = 1
      this.total = ''
      this.getPageList()
    },
    // pageChange
    pageChange(page) {
      this.parameter.pageIndex = page
      this.getPageList()
    },
    // 编辑删除
    updateUser(item) {},
    // tanble row
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    },
    // 取消
    onClose() {
      this.dialogVisible = false
    },
    // 添加
    onSumbit(ruleForm) {
      this.$refs[ruleForm].validate((vaild) => {
        if (vaild) {
          const find = this.projectList.find((item) => {
            return item.pkid === this.addUser.projectId
          })
          // console.log(find)
          // debugger
          if (find) {
            this.$router.push({
              path: '/wisdomBuild/checkOrg/form',
              query: {
                data: JSON.stringify(find),
                type: this.reportType,
                formType: 'add',
                id: ''
              }
            })
          } else {
            var find1 = this.projectListCheck.find(
              (item) => {
                return (
                  item.projectId === this.addUser.projectId
                )
              }
            )
            if (find1) {
              const data = {
                pkid: find1.projectId,
                name: find1.projectName
              }
              this.$router.push({
                path: '/wisdomBuild/checkOrg/form',
                query: {
                  data: JSON.stringify(data),
                  type: this.reportType,
                  formType: 'add',
                  id: ''
                }
              })
            }
          }
        }
      })
    },
    // 合并相同的采购订单编号行，如果返回[0,1]则表示改行也被合并了
    arraySpanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      if (Number(columnIndex) === 1) {
        return {
          rowspan: row.rowspan,
          colspan: row.rowspan > 0 ? 1 : 0
        }
      }
    },
    // 计算每行数据需要合并的行rowspan，在表格数据更新后进行调用
    setrowspans(list, key) {
      list.forEach((v) => {
        v.rowspan = 1
      })
      // 双层循环
      for (let i = 0; i < list.length; i++) {
        /**
         * 内层循环，上面已经给所有的行都加了v.rowspan = 1
         * 如果当前行的processBatchNum和下一行的processBatchNum相等
         * 就把当前v.rowspan + 1
         * 下一行的v.rowspan - 1
         */
        for (let j = i + 1; j < list.length; j++) {
          // 此处可根据相同字段进行合并，此处是根据的processBatchNum，实际情况根据业务需要修改
          if (list[i][key] === list[j][key]) {
            list[i].rowspan++
            list[j].rowspan--
          } else {
            break
          }
        }
        // 这里跳过已经合并的行数据，从下一次需要合并的行开始
        i = i + list[i].rowspan - 1
      }
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  width: 100%;
  height: calc(100vh - 60px);
  //   padding: 16px 30px;
  background-color: #f4f8fe;
  &_title {
    height: 60px;
    width: 100%;
    background-color: #fff;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #4c565c;
    line-height: 60px;
    padding-left: 164px;
  }
  &_main {
    width: calc(100% - 328px);
    height: calc(100% - 120px);
    background: white;
    margin: 30px 164px;
    padding: 15px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    border-radius: 2px;

    .search_header {
      padding: 0 0 13px;

      ::v-deep .el-button {
        background: #497fa3 !important;
        color: white !important;
        border: none !important;
        border-radius: 2px;
        //height: 30px !important;
        //width: 90px !important;
        //padding: 9px 13px !important;
      }

      &_right {
        float: right;
        display: flex;
      }

      &_right::v-deep {
        .el-input__inner {
          // background: #f6f9fc !important;
          color: #a7adb5 !important;
          height: 32px !important;
          width: 228px !important;
          .el-input__icon {
            width: 16px !important;
            height: 16px !important;
            font-size: 16px !important;
            line-height: 40px !important;
          }
        }

        .el-input__suffix {
          top: 1px !important;
          right: 8px !important;
          .el-input__icon {
            width: 16px !important;
            height: 16px !important;
            font-size: 16px !important;
            line-height: 30px;
          }
          .is-reverse {
            line-height: 15px !important;
          }
        }

        .el-select {
          .el-input__inner {
            width: 170px !important;
            margin-left: 10px;
          }

          .el-input__suffix {
            top: 4px !important;
            .el-input__icon {
              width: 16px !important;
              height: 16px !important;
              font-size: 16px !important;
              line-height: 15px;
            }
            .is-reverse {
              line-height: 35px !important;
            }
          }

          .is-focus {
            .el-input__suffix {
              top: -3px !important;
            }
          }
        }

        .el-cascader {
          top: -4px;

          .el-input__inner {
            width: 170px !important;
            margin-left: 10px;
          }
        }
      }
    }

    ::v-deep.light {
      background: #f9fcff;
      border: 1px solid #f2f6fb !important;
    }

    ::v-deep .el-table__row {
      .el-table__cell {
        padding: 0 !important;
      }
    }
  }

  ::v-deep .el-dialog {
    .el-dialog__header {
      background: #597182 !important;
      padding: 8px 0 14px 24px !important;
      height: 39px !important;

      .el-dialog__title {
        font-size: 16px !important;
        line-height: 22px;
        font-weight: 400 !important;
        color: white !important;
        //margin:19px 0 14px 24px !important;
      }

      .el-dialog__headerbtn {
        font-size: 16px;
        top: 10px !important;
        right: 17px !important;
        color: white !important;

        .el-dialog__close {
          color: white !important;
        }
      }
    }

    .el-dialog__body {
      padding: 17px 32px 18px 26px !important;

      .el-form-item {
        margin-bottom: 19px !important;
      }
    }

    .el-input__inner {
      height: 34px !important;
      background-color: #f6f9fc !important;
    }

    .el-button--default {
      border-color: #497fa3 !important;

      span {
        color: #497fa3 !important;
      }
    }

    .el-button--primary {
      background: #497fa3 !important;
      border-color: white !important;
    }
  }

  ::v-deep .el-pagination {
    .active {
      background: #f6f9fc !important;
      color: #00baff !important;
    }

    button {
      border: 1px solid #ebf1f8 !important;
      background: white !important;
      color: #a7adb5 !important;
    }

    li {
      background: white !important;
      color: #00baff !important;
      border: 1px solid #ebf1f8;
      border-radius: 2px;
      font-weight: 400 !important;
      font-size: 12px !important;
      line-height: 25px !important;
    }
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
